<template>
  <div style="background-color: white" v-title data-title="首页">
    <div class="logoAndSerch">
      <div
        style="
          margin: 0 0 0 1.3%;
          vertical-align: middle;
          width: 20%;
          display: inline-block;
        "
      >
        <img :src="this.picList.logo" />
      </div>
      <div class="findPosition">
        <span style="display: inline-block; width: 50%; margin-top: 20px"
          ><el-input v-model="input" @keyup.enter.native="search"></el-input
        ></span>
        <span style="display: inline-block"
          ><el-button type="primary" plain @click="search"
            >搜索</el-button
          ></span
        >
      </div>
    </div>
    <br /><br />
    <el-container>
      <!--页面主体区域-->
      <el-container>
        <!--侧边栏-->
        <el-aside width="15%" class="aside" style="overflow: visible">
          <el-menu class="el-menu-vertical-demo" text-color="black">
            <el-menu-item index="0" disabled style="line-height: 32px">
              <i class="el-icon-document"></i>
              <span slot="title" style="color: black">图书种类</span>
            </el-menu-item>
            <el-popover
              :index="classg.id + ' '"
              v-for="classg in menuList"
              :key="classg.id"
              placement="right-start"
              trigger="hover"
              :close-delay="zero"
            >
              <div style="width: 500px">
                <h3>{{ classg.name }}</h3>
                <hr />
                <span
                  :index="item.id + ' '"
                  v-for="item in classg.subList"
                  :key="item.id"
                  @click="search2(item.id)"
                  class="classes"
                >
                  {{ item.name }} |
                </span>
              </div>
              <el-menu-item
                slot="reference"
                :index="classg.id + ' '"
                style="font-size: 14px; line-height: 32px"
              >
                {{ classg.name }} ></el-menu-item
              >
              <!-- <el-button slot="reference">{{ classg.name }}</el-button> -->
            </el-popover>
          </el-menu>
        </el-aside>
        <!--右侧主内容区域-->
        <el-main class="main" style="overflow: visible">
          <!-- 走马灯 -->
          <div class="changePicture">
            <el-carousel
              :interval="5000"
              arrow="hover"
              height="230px "
              width="95%"
            >
              <el-carousel-item
                v-for="item in pictureList"
                :key="item.id"
                :name="item.id"
                style="cursor: pointer"
              >
                <!-- 透明悬浮选择窗口 -->
                <img
                  ref="imgHeight"
                  :src="item.imageURL"
                  class="banner_img"
                  @click="goShop(item.id, item.product_name)"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 推荐商品 -->
          <div class="advice">
            <el-carousel
              :interval="10000000"
              arrow="always"
              height="283px "
              width="100%"
            >
              <el-carousel-item
                v-for="goodMode in adviceGoods"
                :key="goodMode.id"
                :index="goodMode.id + ' '"
              >
                <div
                  style="
                    font-size: 16px;
                    text-align: left;
                    margin: 8px;
                    font-family: '微软雅黑';
                  "
                >
                  为你推荐：
                </div>
                <div
                  class="goods"
                  v-for="g in 4"
                  :key="g"
                  :index="g"
                  style="cursor: pointer"
                >
                  <div
                    @click="goShop(goodMode[g - 1].id, goodMode[g - 1].name)"
                  >
                    <div style="margin: 8px; background-color: white">
                      <img
                        :src="goodMode[g - 1].imageURL"
                        height="150px"
                        width="130px"
                      />
                    </div>
                    <div class="goodInf">
                      <div
                        style="font-size: 13px; height: 30px; line-height: 15px"
                      >
                        {{ goodMode[g - 1].name }}
                      </div>
                      <div style="font-size: 13px">
                        品相：{{ goodMode[g - 1].appearance }} 库存：{{
                          goodMode[g - 1].store
                        }}
                      </div>
                      <div style="font-size: 13px">
                        价格：¥<span style="color: red">{{
                          goodMode[g - 1].price
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <br />
    <div class="container2">
      <!-- 商品 -->
      <el-tabs type="border-card" class="showGoods" style="min-height: 734px">
        <el-tab-pane
          v-for="goodMode in allGoods"
          :key="goodMode.id"
          :label="goodMode.name"
        >
          <div
            class="goods2"
            v-for="g in goodMode.goods"
            :key="g.id"
            :index="g.id"
            style="cursor: pointer"
          >
            <div @click="goShop(g.id, g.name)">
              <div style="margin: 8px; background-color: white">
                <img :src="g.imageURL" height="150px" width="120px" />
              </div>
              <div class="goodInf">
                <div style="font-size: 13px; height: 40px; line-height: 15px">
                  {{ g.name }}
                </div>
                <div style="font-size: 13px">
                  品相：{{ g.appearance }} 库存：{{ g.store }}
                </div>
                <div style="font-size: 13px">
                  价格：¥<span style="color: red">{{ g.price }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import base from "../../api/base";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("login", ["user"]),
  },
  created() {
    // this.userId = base.myself.userId;
    this.userId = this.user.userId;
    this.getAllCategories(); //获得左侧类别界面
    this.getRecommendGoods(this.userId); //获得走马灯商品
    this.getShowGoods(9, 15); //获得所有物品
    this.getInitPic(); //获得界面的图片
    // this.getAdvice(5, 4); //获得推荐商品
    this.getGoodsByCategoryIdsFromHistory(5, 4);
    this.recommendByUsers(4);
    this.getGoodsByCollection(4);
    this.getGoodsByVisit(4);
    console.log("推荐");
    console.log(this.adviceGoods);
  },
  data() {
    return {
      input: "",
      zero: 0,
      userId: "", //接收传到主页的userId
      //界面图片
      picList: [
        {
          bg: "",
        },
      ],
      //左侧菜单数据
      menuList: [],
      //走马灯
      pictureList: [{ goods: [{ imageURL: "" }] }],
      //商品
      allGoods: [],
      //推荐商品
      adviceGoods: [],
    };
  },
  methods: {
    search() {
      if (this.input == "") {
        this.$message.error("请输入您要搜索的商品");
        return;
      }
      let routeUrl = this.$router.resolve({
        path: "/search",
        query: {
          input: this.input,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    search2(id) {
      let routeUrl = this.$router.resolve({
        path: "/showcrid",
        query: {
          id: id,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 进入商品界面
    goShop(goodId, goodName) {
      let routeUrl = this.$router.resolve({
        path: "/showgoods",
        query: {
          userId: this.userId,
          goodId: goodId,
          name: goodName,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    //在未登录的情况下默认进入登录页面
    login() {
      this.logif = 1;
      this.$router.push("/login");
    },
    // 获得图片的数据
    getInitPic() {
      //从数据库获得logo
      this.$http.get(base.baseUrl + "/home/getInitPic").then((res) => {
        this.picList = res.data;
        console.log("背景和logo");
        console.log(this.picList);
        this.picList.logo = base.baseUrl + this.picList.logo;
      });
    },
    //获得左侧分类列表
    getAllCategories() {
      this.$http.get(base.baseUrl + "/getAllCategories").then((res) => {
        this.menuList = res.data;
        console.log("左侧导航");
        console.log(this.menuList);
      });
    },
    //获得走马灯数据
    getRecommendGoods(userId) {
      //从数据库中获得走马灯列表
      this.$http
        .get(base.baseUrl + "/home/getRecommendGoods", {
          params: { userId: userId },
        })
        .then((res) => {
          this.pictureList = res.data;
          console.log("走马灯");
          for (var i = 0; i < this.pictureList.length; i++) {
            this.pictureList[i].imageURL =
              base.baseUrl + this.pictureList[i].imageURL;
          }
          console.log(this.pictureList);
        });
    },
    //获取主页的所有商品
    getShowGoods(categoryNum, goodsNum) {
      this.$http
        .get(base.baseUrl + "/home/getShowGoods", {
          params: { categoryNum: categoryNum, goodsNum: goodsNum },
        })
        .then((res) => {
          this.allGoods = res.data;
          console.log("商品");
          console.log(this.allGoods);
          for (var i = 0; i < this.allGoods.length; i++) {
            for (var j = 0; j < this.allGoods[i].goods.length; j++) {
              console.log(this.allGoods[i].goods[j]);
              this.allGoods[i].goods[j].imageURL =
                base.baseUrl + this.allGoods[i].goods[j].imageURL;
            }
          }
        });
    },
    //浏览最多推荐
    getGoodsByCategoryIdsFromHistory(categoryNum, goodsNum) {
      if (this.userId == "") {
        return;
      }
      this.$http
        .get(base.baseUrl + "/home/getGoodsByCategoryIdsFromHistory", {
          params: {
            categoryNum: categoryNum,
            goodsNum: goodsNum,
            userId: this.userId,
          },
        })
        .then((res) => {
          var adviceGoods = [];
          adviceGoods = res.data;
          for (var i = 0; i < adviceGoods.length; i++) {
            adviceGoods[i].imageURL = base.baseUrl + adviceGoods[i].imageURL;
          }
          this.adviceGoods.push(adviceGoods);
          // console.log("推荐0");
          // console.log(this.adviceGoods[0]);
        });
    },
    getGoodsByCollection(goodsNum) {
      this.$http
        .get(base.baseUrl + "/home/getGoodsByCollection", {
          params: {
            goodNum: goodsNum,
          },
        })
        .then((res) => {
          var adviceGoods = [];
          adviceGoods = res.data;
          for (var i = 0; i < adviceGoods.length; i++) {
            adviceGoods[i].imageURL = base.baseUrl + adviceGoods[i].imageURL;
          }
          this.adviceGoods.push(adviceGoods);
          // console.log("推荐2");
        });
    },
    getGoodsByVisit(goodsNum) {
      this.$http
        .get(base.baseUrl + "/home/getGoodsByVisit", {
          params: {
            goodsNum: goodsNum,
          },
        })
        .then((res) => {
          var adviceGoods = [];
          adviceGoods = res.data;
          for (var i = 0; i < adviceGoods.length; i++) {
            adviceGoods[i].imageURL = base.baseUrl + adviceGoods[i].imageURL;
          }
          this.adviceGoods.push(adviceGoods);
          // console.log("推荐1");
          // console.log(this.adviceGoods[1]);
        });
    },
    recommendByUsers(goodsNum) {
      if (this.userId == "") {
        return;
      }
      this.$http
        .get(base.baseUrl + "/home/recommendByUsers", {
          params: {
            userId: this.userId,
            goodNum: goodsNum,
          },
        })
        .then((res) => {
          var adviceGoods = [];
          adviceGoods = res.data;
          for (var i = 0; i < adviceGoods.length; i++) {
            adviceGoods[i].imageURL = base.baseUrl + adviceGoods[i].imageURL;
          }
          this.adviceGoods.push(adviceGoods);
          // console.log("推荐3");
          // console.log(this.adviceGoods[3]);
        });
    },
    //获得推荐物品
    // getAdvice(categoryNum, goodsNum) {
    //   this.$http
    //     .get(base.baseUrl + "/home/getShowGoods", {
    //       params: { categoryNum: categoryNum, goodsNum: goodsNum },
    //     })
    //     .then((res) => {
    //       this.adviceGoods = res.data;
    //       console.log("商品推荐");
    //       console.log(this.adviceGoods);
    //       for (var i = 0; i < this.adviceGoods.length; i++) {
    //         for (var j = 0; j < this.adviceGoods[i].goods.length; j++) {
    //           console.log(this.adviceGoods[i].goods[j]);
    //           this.adviceGoods[i].goods[j].imageURL =
    //             base.baseUrl + this.adviceGoods[i].goods[j].imageURL;
    //         }
    //       }
    //     });
    // },
  },
};
</script>

<style scoped>
.goods3 {
  margin: 3px 3.2%;
  height: 215px;
  width: 51%;
  text-align: center;

  float: left;
  background-color: white;
  font-family: "微软雅黑";
  margin-left: 20%;
}
.rightclass {
  display: inline-block;
  vertical-align: top;

  width: 78%;
}
.leftclass {
  display: inline-block;
  vertical-align: top;
  border: 1px solid #ddd;
  width: 20%;
  padding-left: 10px;
  background-color: white;
  margin-left: 2%;
  margin-top: 25px;
}
.goodInf {
  margin-top: 8px;
  background-color: white;
  text-align: left;
  padding: 6px;
  line-height: 20px;
}
.container2 {
  background-color: white;
  height: 100%;
}
.el-menu-item.is-active {
  color: black;
}
.el-menu-item {
  height: 32px;
  border-top: 1px solid #ddd;
  border-collapse: collapse;
  font-family: "微软雅黑";
}
.el-container {
  height: 100%;
  background-color: white;
}
.logoAndSerch {
  height: 100px;
  background-color: white;
  padding: 10px;
  text-align: left;
  width: 100%;
}
.el-menu-vertical-demo {
  width: 70%;
  margin-left: 30%;
  margin-top: 10px;
  border: 1px solid #ddd;
  background-color: white;
  border-collapse: collapse;
}
.el-aside {
  margin: 0;
  height: 560px;
  background-color: white;
  margin-left: 2.5%;
}
.el-main {
  right: 0;
  padding: 0;
  height: 560px;
  background-color: white;
}
.findPosition {
  height: 100px;
  width: 70%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.changePicture {
  height: 230px;
  width: 90%;
  border: 1px solid #ddd;
  margin-top: 12px;
  margin-right: 2.6%;
  display: inline-block;
}
.advice {
  border: 1px solid #ddd;
  margin-right: 2%;
  /* float:inherit; */
  text-align: center;
  height: 308px;
  width: 91%;
  background-color: white;
  display: inline-block;
}
.showGoods {
  margin-top: 25px;
  margin-left: 2.5%;
  /* float:inherit; */
  text-align: center;
  width: 88.6%;
  background-color: white;
  display: inline-block;
}
.goods {
  margin: 3px 3.5%;
  width: 15%;
  text-align: center;
  /* float: left; */
  font-family: "微软雅黑";
  display: inline-block;
}

.goods2 {
  margin: 3px 3.2%;
  width: 13%;
  text-align: center;
  float: left;
  font-family: "微软雅黑";
}
/* .goods:hover {
  box-shadow: 3px 3px 10px #909090;
} */
.goods2:hover {
  box-shadow: 3px 3px 10px #909090;
}
.el-input {
  height: 40px;
  width: 100%;
}
.el-table {
  width: 95%;
}
.el-carousel__container {
  position: relative;
  height: 781px;
  overflow: hidden;
}
.classes:hover {
  text-decoration: underline;
  color: blue;
}
.classes {
  cursor: pointer;
}
</style>